<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>RabbitMQ MQTT</title>
<link href="/vendor/bootstrap/css/bootstrap.css" rel="stylesheet">
<script src="/vendor/jquery/jquery-1.10.2.min.js"></script>
<script src="/js/lib/mqttws31.js"
	type="text/javascript"></script>
<!-- script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js" type="text/javascript"></script-->
</head>

<body class="container">
	<div class="col-md-6 col-md-offset-3">
		<div class="panel panel-primary">
			<div class="panel-heading">
				<h3 class="panel-title">RabitMQ Publish</h3>
			</div>
			<div class="panel-body">
				<div class="form-horizontal col-4-lg">
					<div class="form-group">
						<label for="topic" class="col-sm-2 control-label">topic</label>
						<div class="col-sm-10">
							<input type='text' id='topicsend' class="form-control" placeholder="/test-topic" size="60" />
						</div>

					</div>
					<div class="form-group">
						<label for="topic" class="col-sm-2 control-label">text</label>
						<div class="col-sm-10">
							<input type='text' id='textsend' class="form-control" placeholder="test-data" size="60" />
						</div>
					</div>
					<div class="form-group">
						<div class="col-sm-offset-2 col-sm-10">
							<button type="submit" onclick="publish()" class="btn btn-primary">send</button>
						</div>
					</div>
				</div>
			</div>
		</div>


		<div class="panel panel-primary">
			<div class="panel-heading">
				<h3 class="panel-title">RabitMQ Subscribe</h3>
			</div>
			<div class="panel-body">
				<input type='text' class="form-control" id='sub_count' disabled />
				<ul id='sub_message'></ul>
			</div>
		</div>


	</div>
</body>
<script type="text/javascript">
	var hostname = "127.0.0.1"; //主机IP  106.14.181.32
	var hostPort = 15675; //port
	var sub_count = 0;
	var client;
	var clientId = "myclientid_" + parseInt(Math.random() * 100, 10);
	var infoD = $('#sub_message')
	var count = $('#sub_count')
	function appendMsg(msg) {
		$('#sub_message').prepend(msg);
	}
	function countAdd() {
		count.val('收到订阅' + sub_count + '条');
	}
	/* var options = {
		    timeout: 3,
		    keepAliveInterval: 30,
		    onSuccess: function () {
		        debug("CONNECTION SUCCESS");
		        client.subscribe('/topic/test', {qos: 1});
		    },
		    onFailure: function (message) {
		        debug("CONNECTION FAILURE - " + message.errorMessage);
		    }
		};
		if (location.protocol == "https:") {
		    options.useSSL = true;
		}
		debug("CONNECT TO " + wsbroker + ":" + wsport);
		client.connect(options); */

	function MQTTconnect() {
		client = new Paho.MQTT.Client(hostname, hostPort, '/ws', clientId);
		client.onMessageArrived = onMessageArrived;
		client.onConnectionLost = onConnectionLost;
		client.connect({
			timeout : 3,
			keepAliveInterval : 30,
			onSuccess : onConnect,
			onFailure : connectFail

		});
		console.log("Host=" + hostname + ", port=" + hostPort);
	};
	// 连接成功回调
	function onConnect() {
		console.log("onConnect succeeds");
		//  client.subscribe('topic');
		client.subscribe('#'); //订阅所有主题
	}
	//连接失败回调
	function connectFail(message) {
		console.log("CONNECTION FAILURE - " + message.errorMessage);
	}
	// 连接断开回调
	function onConnectionLost(responseObject) {
		if (responseObject.errorCode !== 0) {
			alert('diconneced');
			console.log("onConnectionLost:" + responseObject.errorMessage);
		}
	}
	// 接收到订阅消息回调
	function onMessageArrived(message) {
		var topic = message.destinationName;
		var payload = message.payloadString;
		console.log("onMessageArrived:" + payload);
		sub_count++;
		countAdd();
		appendMsg('<li>' + topic + ' => ' + payload + '</li>')
	}
	
	//发布消息
	function publish() {
		var topic = $('#topicsend').val();
		var text = $('#textsend').val();
		if (topic == '' || text == '') {
			alert("noTopic or noText");
			return;
		}
		var message = new Paho.MQTT.Message(text);
		message.destinationName = topic;
		message.qos = 0;
		client.send(message);
	};

	/* var timeInterval = window.setInterval(function() {
		if (!client.isConnected()) {
			alert('diconneced');
			window.clearInterval(timeInterval);
		}
	}, 1000); */

	$(document).ready(function() {
		MQTTconnect();
	});
</script>
</html>